<template>
  <section class="todoapp">
    <TodoHeader @taskname="htaskName" />
    <TodoMain :list="res" @san="sans" @mod="hMod" />
    <TodoFooter
      :list="res"
      @clearDone="hClearDone"
      @changeType="hchangeType"
    />
  </section>
</template>

<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      // list: [
      //   { id: 1, name: '吃饭', isDone: true },
      //   { id: 2, name: '睡觉', isDone: false },
      //   { id: 3, name: '打豆豆', isDone: true }
      // ],
      list: JSON.parse(localStorage.getItem("list") || "[]"),
      type: "all",
      res: [],
    };
  },
  methods: {
    sans(id) {
      const index = this.list.findIndex((item) => item.id === id);
      this.list.splice(index, 1);
    },
    hMod(id) {
      // console.log(obj);
      const index = this.list.find((item) => item.id === id);
      index.isDone = !index.isDone;
    },
    htaskName(obj) {
      this.list.push({
        id: Date.now(),
        name: obj,
        isDone: false,
      });
    },
    hClearDone() {
      // ?
      this.list = this.list.filter((item) => !item.isDone);
    },
    hchangeType(type) {
      this.type = type;
          if (this.type === "all") return this.res= this.list;

      if (this.type === "active")
        return this.res= this.list.filter((item) => !item.isDone);

      if (this.type === "completed")
        return  this.res=this.list.filter((item) => item.isDone);
    },
  },
  created(){
         if (this.type === "all") return this.res= this.list;

      if (this.type === "active")
        return this.res= this.list.filter((item) => !item.isDone);

      if (this.type === "completed")
        return  this.res=this.list.filter((item) => item.isDone);
  },
  computed: {
    showList() {
      return 0;
    },
  },
  watch: {
    list: {
      deep: true,
      handler() {
        localStorage.setItem("list", JSON.stringify(this.list));
      },
    },
  },
};
</script>

<style></style>
